import React from 'react'
import BaseModal from "./BaseModal";
export class AlertBox extends BaseModal{
    static defaultProps= {
        title: '提示',  //标题
        button: ["确定", "取消"],
        isHasClose: true,
        content: null, //内容
        success: null, //确定回调
        isConfirmClose:true,  //是否点击确定关闭
    };
    static show(props){
        global.popupView.push(<AlertBox {...props} key={Date.now()}/>);
        global.app.setState({});
        document.body.addEventListener('touchmove',(e)=>e.preventDefault(),false);
        $('body').css({'position':'fixed',"width":"100%"});
    }

    static closeModal(){
        global.popupView.pop();
        global.app.setState({});
        document.body.removeEventListener('touchmove',(e)=>e.preventDefault(),false);
        $("body").css({"position":"initial","height":"auto"});
    }

    confirm(){
        if(this.props.success && typeof this.props.success === "function"){
            this.props.success();
        }
        this.props.isConfirmClose ? this.close() : null;
    }


    renderMsg(){
        let buttonContent = null;
        if(this.props.button.length == 1){
            buttonContent = <div style={{width:"100%",marginTop:"0.2rem"}}>
                                <button style={{width: '100%', height:"0.86rem",borderRadius:"0.1rem", backgroundColor: '#f10180', display:"flex",alignItems: 'center', justifyContent: 'center'}} onClick={()=>{this.confirm()}}>
                                    <span style={{fontSize:"0.3rem", color: 'white'}}>{this.props.button[0]}</span>
                                </button>
                            </div>
        }else{
            buttonContent = <div style={{width:"100%",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:"0.2rem"}}>
                                <button style={{width: '48%',  height:"0.86rem", borderRadius:"0.1rem", backgroundColor: '#f10180',display:"flex", alignItems: 'center', justifyContent: 'center'}} onClick={()=>{this.confirm()}}>
                                    <span style={{fontSize:"0.3rem", color: 'white'}}>{this.props.button[0]}</span>
                                </button>
                                <button style={{width: '48%', height:"0.86rem",borderRadius:"0.1rem", border:"1px solid #f10180", backgroundColor: '#fff',display:"flex", alignItems: 'center', justifyContent: 'center'}} onClick={this.close.bind(this)}>
                                    <span style={{fontSize:"0.3rem", color: '#f10180'}}>{this.props.button[1]}</span>
                                </button>
                            </div>
        }
        return(
            <div style={{width:"100%"}}>
                <div className="modal-content" style={{minHeight:this.props.minHeight ? this.props.minHeight :"3rem",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"}}>{this.props.content}</div>
                {buttonContent}
            </div>

            )

    }

    renderContent(){
        return (
           <div style={{position:"absolute",height:"100%",width:"100%",display:"flex",flexDirection:"column",alignItems: 'center', justifyContent: 'center'}}>
            <div style={{width: '92%',padding:"0.2rem",flexDirection:"column", display:"flex",borderRadius:"0.1rem", backgroundColor: 'white', alignItems: 'center'}}>
                {
                    this.props.isHasClose ?
                        <div style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"center",position:"relative"}}>
                            <div style={{fontSize:"0.32rem", color: '#333'}}>{this.props.title}</div>
                            <i onClick={this.close.bind(this)} className="iconfont icon-chazishanchudaibiankuang" style={{fontSize:"0.4rem",color:"#333",position:"absolute",top:0,right:0}} />
                        </div>
                        :null

                }
                {this.renderMsg()}
            </div>
           </div>)
    }
}